<template>
  <div>
    <div id="bottomLeftChart" style="width:900px;height:500px;" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
const echarts = require('echarts')
export default {
  data() {
    return {
          dep: [],
          bz: [],
          sy: []
    }
  },
  mounted() {
    this.drawPie()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    async getWtyj_cbyj() {
      try {
        //请求后台接口
        const res = await Sever.analyse.getWtyj_cbyj({
          //请求参数
          dep_code: '45000'
        })
        //取值赋给dep,bz,sy
        res.map(item => {
          this.dep = item.DEP.split(',')
          this.bz = item.BZ.split(',').map(Number)
          this.sy = item.SY.split(',').map(Number)
        })
      } catch (error) {
        console.log(error)
      }
    },
    async drawPie() {
      await this.getWtyj_cbyj()
      // 基于准备好的dom，初始化echarts实例
      const myChartPieLeft = echarts.init(
        document.getElementById('bottomLeftChart')
      )
      //  ----------------------------------------------------------------
      const category = this.dep
      const lineData = this.bz
      const barData = this.sy
      const rateData = []
      for (let i = 0; i < 33; i++) {
        const rate = barData[i] / lineData[i]
        rateData[i] = rate.toFixed(2)
      }

      const option = {
        title: {
          text: '',
          x: 'center',
          y: 0,
          textStyle: {
            color: '#B4B4B4',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.1)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#7B7DDC'
            }
          }
        },
        legend: {
          data: ['实际占用', '计划编制', '编制使用率'],
          textStyle: {
            color: '#B4B4B4'
          },
          top: '0%'
        },
        grid: {
          x: '8%',
          width: '88%',
          y: '4%'
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },

            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            name: '编制使用率',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#F02FC2'
              }
            },
            data: rateData
          },

          {
            name: '实际占用',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#956FD4' },
                  { offset: 1, color: '#3EACE5' }
                ])
              }
            },
            data: barData
          },

          {
            name: '计划编制',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(156,107,211,0.8)' },
                  { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
                  { offset: 1, color: 'rgba(156,107,211,0.2)' }
                ])
              }
            },
            z: -12,

            data: lineData
          }
        ]
      }
      myChartPieLeft.setOption(option)
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener('resize', () => myChartPieLeft.resize(), false)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
